{% extends 'mac_basic.html' %}
{% load static %}

{% block title %}
    创建出货
{% endblock %}


{% block meta %}

{% endblock %}


{% block css %}
    <style>
        .form {
            width: 500px;
            margin-top: 51px ;
            margin-left: 150px;
        }
        .form-group {
                margin-bottom: 25px;
        }
        .error_span {
            position: absolute;
            color: red;
        }
        #user_title {
            border-bottom: 3px solid #8B8989;
            padding-left: 200px;
        }
        #id_a {
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>

{% endblock %}


{% block content %}
    <div id="id_a"><a class="btn btn-default" href="{% url 'query_delivery_order' %}" role="button">返回</a></div>

    <div id="user_title">
        {% if oid %}
            <h3>修改<small> 出货单</small></h3>
        {% else %}
            <h3>新增<small> 出货单</small></h3>
        {% endif %}
    </div>
    <div class="form">

        <form method="post" class="form-horizontal" novalidate>
            {% for obj in notice_form %}
                <div class="form-group">
                    <label for="mac_id" class="col-sm-3 control-label">{{ obj.label_tag }}</label>
                    <div class="col-sm-8">
                        {{ obj }}
                        <span class="error_span" id="error_mac">{{ obj.errors }}</span>
                    </div>
                    <span class="error_span"></span>
                </div>

            {% endfor %}
             <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> 验证mac
                    </label>
                  </div>
                </div>
             </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-3">
                    <input  class="form-control btn btn-info" type="submit" value="确定" disabled>
                </div>
            </div>
        </form>
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'plugins/csv.js/csv.js' %}"></script>

    <script>
        $('#id_mac_file').change(function () {
            $('#id_mac_address').parent().next().text('');
            $('input[type=checkbox]')[0].checked = false;
            if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
                 alert('请使用Chrome浏览器!');
             }
            var mac_str='';
            var files = $('input[name="mac_file"]').prop('files');//获取到文件列表
            if (files.length === 0) return;
            var reader = new FileReader();//新建一个FileReader
            reader.readAsText(files[0], "gbk");//读取文件
            reader.onload = function(evt){ //读取完文件之后会回来这里
                var fileString = evt.target.result;
                var a = CSV.parse(fileString, {
                    header: ['mac']
                });　　　　　　
                a.shift(); // 去a列表的第一个元素
                for (var i=0; i < a.length; i++ ){
                  mac_str = mac_str + a[i][0]+'\r\n'
                }
                $('#id_mac_address').val(mac_str)
                $('#id_nums').val(a.length)
            }
    })
    </script>

    <script>
        $('input[type=checkbox]').click(function () {
         $.ajax({
            url: {% url 'check_mac' %},
            type: 'POST',
            data: {'mac_values': $('#id_mac_address').val()},
            dataType: 'JSON',
            success: function (res) {
                var sjson = JSON.stringify(res.no_exist)
                if (sjson !== '[]' && sjson!==undefined) {
                    $('#id_mac_address').parent().next().text('不存在：\r\n'+ sjson);
                    $('input[type=submit]').attr('disabled', 'disabled')
                }else if (res.format_error) {
                    $('#id_mac_address').parent().next().text('mac格式错误：'+ JSON.stringify(res.format_error))
                    $('input[type=submit]').attr('disabled', 'disabled')
                }else if (res.empty) {
                    alert('mac地址不能为空')
                    $('input[type=checkbox]')[0].checked = false;
                    $('input[type=submit]').attr('disabled', 'disabled')
                }else {
                    alert('验证通过')
                    $('input[type=submit]').removeAttr('disabled')
                }
            }
         })
    })
    </script>

    <script>
        $('#id_mac_address').keyup(function () {
            $('input[type=checkbox]')[0].checked = false;
            $('input[type=submit]').attr('disabled', 'disabled')
            $(this).parent().next().text('');
        })
    </script>
{% endblock %}
